<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-16 10:11
  PageName：b_practice2_FontSize.html
  Function：实战案例 - 字体大小与网页布局关联
  URL：http://localhost:8080/e3_webpage_CSS3_TextStyle/b_practice2_FontSize.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 字体大小与网页布局关联</title>

    <!-- 不管字体缩放多大，字体总是在一行内显示 -->
    <style type="text/css">
        #left {
            font-size: 0.875em;       /* 字体大小为14像素 */
            /*width:32%; */           /* 以百分比定义宽度 */
            width: 12em;              /* 定义元素的宽度为12个字体长度 */
            border: solid 1px red;    /* 定义一个边框，以方便观察显示效果 */
            height: 1em;              /* 定义高度为1个字体大小 */
        }
    </style>
</head>

<body>
<div id="left">字体大小与网页布局关联</div>
</body>
</html>